<template>
	<view class="flex-row user-top-dom">
		<image v-if="userData.avatarUrl" style="width: 80px; height: 80px;  border-radius: 4px;" :src="userData.avatarUrl"></image>
		<image v-else-if="userData.gender == 1" style="width: 80px; height: 80px;  border-radius: 4px;" src="@/static/images/user-avatar1.png"></image>
		<image v-else style="width: 80px; height: 80px;  border-radius: 4px;" src="@/static/images/user-avatar2.png"></image>
		<view class="user-top-dom-r">
			<view class="title">{{userData.name}}</view>
			<view>{{userData.nickname}} </view>
			<view>{{userData.phonenumber}}</view>
		</view>
	</view>
	
	<view class="p10">
		<uni-list>
			<uni-list-item title="基本信息" to="/pages/teacher/user/information/index" link>
				<template v-slot:footer><text class="iconfont icon-jibenxinxi1"
						style="color: #9896f1;"></text></template>
			</uni-list-item>
			<uni-list-item title="修改基本信息" to="/pages/teacher/user/information/edit" link>
				<template v-slot:footer><text class="iconfont icon-xiugaimima"
						style="color: #ff7500;"></text></template>
			</uni-list-item>
			<!-- #ifdef MP-WEIXIN -->
			<uni-list-item title="消息推送开关" to="/pages/teacher/user/correlation-wx" link>
				<template v-slot:footer><text class="iconfont icon-xinxituisong"
						style="color: #008aff;"></text></template>
			</uni-list-item>
			<!-- #endif -->
		</uni-list>
	</view>
	<button @click="logOut" type="default" style="margin: 10px 15px;" class="basicbutton " hover-class="basicbutton-hover">退出</button>
</template>

<script lang="ts" setup>
	import { getUser } from "@/utils/storage"
	import { User } from "@/api/tables/User"
	import { ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	
	let userData = ref<User>({})
	onShow(() => {
		userData.value = getUser()
	})
	
	function logOut() {
		uni.redirectTo({
			url: '/pages/login/login'
		});
	}
</script>

<style lang="scss" scoped>
	.user-top-dom {
		background: #fff;
		padding: 20px;
		height: 100px;

		.user-top-dom-r {
			padding: 0 20px;
			font-size: 22rpx;
			line-height: 2;
			color: #999;

			.title {
				font-size: 28rpx;
				font-weight: 600;
				color: #666;
			}

		}
	}

	.tab-dom {
		.tab-item {
			text-align: center;
			flex: 1
		}
	}
</style>